<template>
  <div class="bubble">
    <!-- <div class="bubble-icon" v-if="$slots.icon || inputType">
      <slot name="icon">
        <template v-if="inputType">
          <app-prompt-icon :input-type="inputType" />
        </template>
      </slot>
    </div> -->
    <div class="bubble-body">
      <slot>
        <template v-if="type == 'markdown'">
          <app-markdown :content="content" :typing="typing" @finish="handleEnd" />
        </template>
        <template v-else>
          <Typewriter :content="content" :typing="typing" @finish="handleEnd" />
        </template>
      </slot>
    </div>
  </div>
</template>
<script setup>
import { Typewriter } from 'vue-element-plus-x'

const emit = defineEmits(['end'])
const props = defineProps({
  content: String,
  time: String,
  typing: Object,
  type: String,
  inputType: String,
})

const handleEnd = () => {
  emit('end')
}
</script>
<style lang="scss" scoped>
.bubble {
  display: flex;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 12px;
  // line-height: 1.6;
  // white-space: pre-wrap;
}

.bubble-icon {
  margin-right: 12px;
}

.time {
  text-align: right;
  font-size: 12px;
  color: #999;
}
</style>
